<template>
  <div class="app-container">
    <!--    <IntroduceTip :value="4"></IntroduceTip>-->
    <el-row :gutter="12">
      <el-col :span="4">
        <div class="custom_card">
          <el-table
            v-loading="loadingOwner"
            :data="ownerList.filter(data => !queryParamsOwner.name || data.name.toLowerCase().includes(queryParamsOwner.name.toLowerCase()))"
            @row-click="changeOwner"
            :row-style="rowStyle"
            border
          >
            <el-table-column label="车主名称" align="left" prop="name">
              <template slot="header" slot-scope="scope">
                <el-input
                  v-model="queryParamsOwner.name"
                  size="mini"
                  placeholder="车主名称"/>
              </template>
              <template slot-scope="scope">
                <span>{{ scope.row.name }}</span>
                <span v-if="scope.row.contactsPhone">({{ scope.row.contactsPhone }})</span>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            layout="prev, pager, next"
            v-show="totalOwner > 0"
            :total="totalOwner"
            :page.sync="queryParamsOwner.pageNum"
            :limit.sync="queryParamsOwner.pageSize"
            @pagination="getOwnerList"
          >
          </pagination>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="custom_card">
          <el-row>
            <el-col :span="24">
              <Tabs
                :list="tabs_list"
                :column="6"
                :minWidth="200"
                :active="queryParams.type"
                @tabs_click="changeTab"
              ></Tabs>
            </el-col>
          </el-row>
        </div>
        <div class="custom_card">
          <el-row>
            <el-col :span="24" style="margin-top: 20px">
              <el-form
                :model="queryParams"
                ref="queryForm"
                :inline="true"
                v-show="showSearch"
                label-width="68px"
              >
                <el-form-item label="账单时间" prop="startTime">
                  <el-date-picker
                    clearable
                    size="small"
                    v-model="billTimeRange"
                    type="daterange"
                    range-separator="至"
                    value-format="yyyy-MM-dd"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    @change="changeBillTime"
                  >
                  </el-date-picker>
                </el-form-item>

                <el-form-item label="账单类型" prop="billType">
                  <el-select
                    v-model="queryParams.billType"
                    placeholder="请选择账单类型"
                    clearable
                    size="small"
                  >
                    <el-option
                      v-for="dict in billTypes"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="车牌号" prop="carNo">
                  <el-input
                    v-model="queryParams.carNo"
                    placeholder="请输入车牌号"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                  />
                </el-form-item>
                <template v-if="queryParams.type == 1 || queryParams.type == 2">
                  <el-form-item label="订单编号" prop="bizNo">
                    <el-input
                      v-model="queryParams.bizNo"
                      placeholder="请输入订单编号"
                      clearable
                      size="small"
                      @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>
                  <el-form-item label="客户信息" prop="userName">
                    <el-input
                      v-model="queryParams.userName"
                      placeholder="请输入客户姓名/手机号"
                      clearable
                      size="small"
                      @keyup.enter.native="handleQuery"
                    />
                  </el-form-item>
                </template>

                <template v-if="queryParams.type==2||queryParams.type==4">

                  <template v-if="queryParams.type==2">
                    <el-form-item label="支付方式" prop="payWay">
                      <el-select
                        v-model="queryParams.payWay"
                        placeholder="请选择支付方式"
                        clearable
                        size="small"
                      >
                        <el-option
                          v-for="dict in payWays"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="支付时间" prop="startTime">
                      <el-date-picker
                        clearable
                        size="small"
                        v-model="payTimeRange"
                        type="daterange"
                        range-separator="至"
                        value-format="yyyy-MM-dd"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        @change="changePayTime"
                      >
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="操作人" prop="operator">
                      <el-input
                        v-model="queryParams.operator"
                        placeholder="请输入操作人"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                      />
                    </el-form-item>
                  </template>

                  <template v-else>
                    <el-form-item label="收款方式" prop="payWay">
                      <el-select
                        v-model="queryParams.payWay"
                        placeholder="请选择付款方式"
                        clearable
                        size="small"
                      >
                        <el-option
                          v-for="dict in payWays"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="收款时间" prop="startTime">
                      <el-date-picker
                        clearable
                        size="small"
                        v-model="payTimeRange"
                        type="daterange"
                        range-separator="至"
                        value-format="yyyy-MM-dd"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        @change="changePayTime"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </template>
                </template>


                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                  >搜索
                  </el-button
                  >
                  <el-button
                    icon="el-icon-refresh"
                    size="mini"
                    @click="resetQuery"
                  >重置
                  </el-button
                  >
                  <!--                  <el-button-->
                  <!--                    type="warning"-->
                  <!--                    plain-->
                  <!--                    icon="el-icon-download"-->
                  <!--                    size="mini"-->
                  <!--                    :loading="exportLoading"-->
                  <!--                    @click="handleExport"-->
                  <!--                  >导出-->
                  <!--                  </el-button>-->

                </el-form-item>
                <!--                <el-form-item>-->
                <!--                  <el-tooltip placement="top" effect="dark">-->
                <!--                    <div slot="content" style="font-size: 16px">-->
                <!--                      与同行借调车辆产生的借调费用的收支情况。在借调模块操作借调后，费用将同步到此模块-->
                <!--                    </div>-->
                <!--                    <el-button type="text">功能说明&nbsp;<i class="el-icon-warning-outline"></i></el-button>-->
                <!--                  </el-tooltip>-->
                <!--                </el-form-item>-->
              </el-form>
              <div v-if="queryParams.type==1||queryParams.type==3" style="margin-bottom: 10px">
                <el-button type="primary" @click="handleBulkPayments">{{ queryParams.type == 1 ? '批量付款' : '批量收款' }}</el-button>
              </div>

              <el-table v-loading="loading" :data="billList" border @selection-change="handleSelectionChange">
                <template v-if="queryParams.type == 1 || queryParams.type==3">
                  <el-table-column
                    v-if="queryParams.type == 1"
                    type="selection"
                    width="55" key="1">
                  </el-table-column>
                  <el-table-column
                    v-else
                    type="selection"
                    width="55" key="3">
                  </el-table-column>
                </template>

                <template v-if="queryParams.type == 1 || queryParams.type==2">
                  <el-table-column
                    label="账单类型"
                    align="center"
                    prop="jobName"
                    min-width="120"
                    show-overflow-tooltip
                    key="10"
                  >
                    <template v-slot="{row}">{{ row.billType|escrowBillType }}</template>
                  </el-table-column>

                  <el-table-column
                    label="车牌号"
                    align="center"
                    prop="carNo"
                    min-width="120"
                    show-overflow-tooltip
                    key="11"
                  />
                  <el-table-column
                    label="订单编号"
                    align="center"
                    prop="bizNo"
                    min-width="180"
                    show-overflow-tooltip
                    key="12"
                  >
                    <template v-slot="{row}">
                      <el-button v-if="row.billType==1" type="text" @click="goOrder(row)">{{ row.bizNo }}</el-button>
                      <el-button v-if="row.billType==2" type="text" @click="goCar(row)">查看详情</el-button>
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="承租人/同行"
                    align="center"
                    prop="userName"
                    min-width="120"
                    show-overflow-tooltip
                    key="13"
                  >
                  </el-table-column>

                  <el-table-column
                    label="用车时间"
                    align="center"
                    min-width="340"
                    show-overflow-tooltip
                    key="14"
                  >
                    <template v-slot="{row}">
                      {{ row.startTime }} 至 {{ row.endTime }}
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="租期"
                    align="center"
                    prop="leaseTerm"
                    min-width="120"
                    show-overflow-tooltip
                    key="15"
                  >
                    <template v-slot="{row}">
                      <span v-if="row.billType == 1">{{ row.leaseTerm }}天</span>
                      <span v-else>--</span>
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="托管单价"
                    align="center"
                    prop="escrowUnitPrice"
                    min-width="120"
                    show-overflow-tooltip
                    key="16"
                  >
                    <template v-slot="{row}">
                      <span v-if="row.escrowUnitPrice == null">--</span>
                      <span v-else>{{ row.escrowUnitPrice }}元/天</span>
                    </template>
                  </el-table-column>


                  <el-table-column
                    label="用车天数"
                    align="center"
                    prop="leaseTerm"
                    min-width="120"
                    show-overflow-tooltip
                    key="17"
                  >
                    <template v-slot="{row}">
                      {{ row.billType == 1 ? row.leaseTerm : row.usageDays }}天
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="托管费用"
                    align="center"
                    prop="custodyFees"
                    min-width="160"
                    show-overflow-tooltip
                    key="18"
                  >
                    <template v-slot="{row}">
                      <span>{{ row.custodyFees }}元</span>
                      <span v-if="row.payAmount>0" style="color: red">(已付{{ row.payAmount }}元)</span>
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="账单时间"
                    align="center"
                    min-width="160"
                    prop="billingTime"
                    show-overflow-tooltip
                    key="19"
                  />

                  <template v-if="queryParams.type==2">
                    <el-table-column
                      label="支付时间"
                      align="center"
                      prop="payTime"
                      min-width="160"
                      show-overflow-tooltip
                      key="20"
                    />
                    <el-table-column
                      label="支付方式"
                      align="center"
                      prop="payWay"
                      min-width="120"
                      show-overflow-tooltip
                      key="21"
                    >
                      <template v-slot="{row}">
                        {{ row.payWay|escrowPayway }}
                      </template>
                    </el-table-column>

                    <el-table-column
                      label="支付金额"
                      align="center"
                      prop="payAmount"
                      min-width="120"
                      show-overflow-tooltip
                      key="22"
                    >
                      <template v-slot="{row}">
                        {{ row.payAmount }}元
                      </template>
                    </el-table-column>
                  </template>
                </template>

                <template v-if="queryParams.type == 3 || queryParams.type == 4">
                  <el-table-column
                    label="车牌号"
                    align="center"
                    prop="carNo"
                    min-width="120"
                    show-overflow-tooltip
                    key="23"
                  >
                    <template v-slot="{row}">
                      <el-button type="text" @click="goCar(row)">{{ row.carNo }}</el-button>
                    </template>
                  </el-table-column>

                  <el-table-column
                    label="账单类型"
                    align="center"
                    prop="orderNo"
                    min-width="120"
                    show-overflow-tooltip
                    key="24"
                  >
                    <template v-slot="{row}">{{ row.billType|escrowBillType }}</template>
                  </el-table-column>


                  <el-table-column
                    label="关联时间"
                    align="center"
                    prop="orderNo"
                    min-width="340"
                    show-overflow-tooltip
                    key="25"
                  >
                    <template v-slot="{row}">
                      {{ row.startTime }} 至 {{ row.endTime }}
                    </template>
                  </el-table-column>


                  <el-table-column
                    label="费用"
                    align="center"
                    prop="custodyFees"
                    min-width="120"
                    show-overflow-tooltip
                    key="26"
                  >
                    <template v-slot="{row}">
                      {{ row.custodyFees }}元
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="账单时间"
                    align="center"
                    prop="billingTime"
                    min-width="160"
                    show-overflow-tooltip
                    key="27"
                  />

                  <template v-if="queryParams.type == 4">
                    <el-table-column
                      label="收款时间"
                      align="center"
                      prop="payTime"
                      min-width="160"
                      show-overflow-tooltip
                      key="28"
                    />
                    <el-table-column
                      label="收款方式"
                      align="center"
                      prop="orderNo"
                      min-width="120"
                      show-overflow-tooltip
                      key="29"
                    >
                      <template v-slot="{row}">
                        {{ row.payWay|escrowPayway }}
                      </template>
                    </el-table-column>

                    <el-table-column
                      label="收款金额"
                      align="center"
                      prop="payAmount"
                      min-width="120"
                      show-overflow-tooltip
                      key="30"
                    >
                      <template v-slot="{row}">
                        {{ row.payAmount }}元
                      </template>
                    </el-table-column>

                  </template>
                </template>

                <template v-if="queryParams.type == 2 || queryParams.type == 4">
                  <el-table-column
                    label="操作人"
                    align="center"
                    prop="operator"
                    min-width="120"
                    show-overflow-tooltip
                    key="31"
                  />
                </template>

                <el-table-column
                  label="操作"
                  fixed="left"
                  align="center"
                  width="180"
                  class-name="small-padding fixed-width"
                >
                  <template v-slot="{row}">
                    <el-button
                      size="mini"
                      type="text"
                      v-if="queryParams.type == 1 && row.payAmount == 0"
                      @click="handleEdit(row)"
                    >编辑
                    </el-button>
                    <el-button
                      size="mini"
                      type="text"
                      v-if="queryParams.type==1||queryParams.type == 3"
                      @click="handleConfimPayment(1, row)"
                    >{{ queryParams.type == 1 ? '确认付款' : '确认收款' }}
                    </el-button>
                    <el-button
                      v-else
                      size="mini"
                      type="text"
                      @click="handleFeeBreakdown(row)"
                    >费用明细
                    </el-button>

                  </template>
                </el-table-column>
              </el-table>

              <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getBillList"
              />
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <!--    编辑付款账单弹框-->
    <edit-pay-bill ref="editPayBill" @success="refreshBillList"></edit-pay-bill>
    <!--    收付款确认弹框-->
    <confim-payment ref="confimPayment" @success="refreshBillList"></confim-payment>
    <!--    费用明细弹框-->
    <fee-breakdown ref="feeBreakdown"></fee-breakdown>
    <!--    借调详情-->
    <seconded-detail ref="secondedDetail"></seconded-detail>
  </div>
</template>

<script>
import Tabs from '@/components/custom/tabs.vue'
import EditPayBill from "./components/editPayBill.vue";
import ConfimPayment from "./components/confimPayment.vue";
import FeeBreakdown from "./components/feeBreakdown.vue";
import SecondedDetail from "./components/secondedDetail.vue"
import * as escrowApi from "@/api/bills/escrow";
import {listSupplier} from "@/api/supplier/supplier";

export default {
  name: 'Escrow',
  components: {
    Tabs,
    EditPayBill,
    ConfimPayment,
    FeeBreakdown,
    SecondedDetail
  },
  data() {
    return {
      tabs_list: [
        {key: '1', name: '待付金额', count: '￥0'},
        {key: '2', name: '已付金额', count: '￥0'},
        {key: '3', name: '待收金额', count: '￥0'},
        {key: '4', name: '已收金额', count: '￥0'},
      ],
      billTypes: [
        {label: '日租订单', value: 1},
        {label: '车辆借出', value: 2}
      ],
      payWays: [
        {label: '微信', value: 1},
        {label: '支付宝', value: 2},
        {label: '信用卡', value: 3},
        {label: '现金', value: 4},
      ],

      /*车主*/
      ownerList: [],
      search: '',
      loadingOwner: false,
      totalOwner: 0,
      queryParamsOwner: {
        pageNum: 1,
        pageSize: 10,
        type: 6,
        name: ''
      },
      // 当前车主
      currentOwnerId: null,


      /* 账单 */
      showSearch: true,
      loading: false,
      billTimeRange: [],
      payTimeRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: 1,//tab类型
        carOwner: null,//车主id
        billingStart: null,//账单开始时间
        billingEnd: null,//账单结束时间
        billType: null,//账单类型
        carNo: null,//车牌号
        bizNo: null,//业务编号
        userName: null,//客户信息
        payWay: null,//支付方式
        payStart: null,//支付|收款开始时间
        payEnd: null,//支付|收款结束时间
        operator: null,//操作人
      },
      total: 0,
      billList: [],
      //选中的账单
      selectsBills: [],

      exportLoading: false,
    }
  },

  created() {
    this.getOwnerList()
  },
  methods: {

    //获取车主列表
    getOwnerList() {
      this.loadingOwner = true;
      listSupplier(this.queryParamsOwner).then(res => {
        this.loadingOwner = false;
        let dataSource = res.rows;
        if (dataSource && dataSource.length > 0) {
          this.ownerList = dataSource.filter(item => item.type == 6);
          //
          if (!this.currentOwnerId) {
            this.currentOwnerId = this.queryParams.carOwner = this.ownerList[0].id
            this.getBillList()
          }
        }
        this.totalOwner = res.total || 0;
      })
    },

    //获取托管对账单
    getBillList() {
      this.loading = true;
      escrowApi.statistics(this.queryParams).then(res => {
        this.tabs_list = [
          {key: '1', name: '待付金额', count: '￥' + res.data?.toBePaid},
          {key: '2', name: '已付金额', count: '￥' + res.data?.paid},
          {key: '3', name: '待收金额', count: '￥' + res.data?.dueIn},
          {key: '4', name: '已收金额', count: '￥' + res.data?.received},
        ]
      })
      escrowApi.escrowBillList(this.queryParams).then(res => {
        this.loading = false;
        this.billList = res.rows;
        this.total = res.total;
      })
    },
    // 切换车主
    changeOwner(owner) {
      this.currentOwnerId = this.queryParams.carOwner = owner.id;
      this.refreshBillList()
    },
    // 刷新托管账单
    refreshBillList() {
      this.queryParams.pageNum = 1
      this.getBillList();
    },
    //tab切换
    changeTab(key) {
      if (key == 1 || key == 2) {
        this.billTypes = [
          {label: '日租订单', value: 1},
          {label: '车辆借出', value: 2},
        ]
      } else {
        this.billTypes = [
          {label: '车辆维修', value: 3},
          {label: '车辆保养', value: 4},
          {label: '商业险续保', value: 5},
          {label: '交强险续保', value: 6},
          {label: '车辆年检', value: 7},
        ]
      }
      this.queryParams.type = key
      this.resetQuery()
    },

    // 时间筛选改变
    changeBillTime(times) {
      this.queryParams.billingStart = times[0] + ' 00:00:00';
      this.queryParams.billingEnd = times[1] + ' 23:59:59';
    },
    changePayTime(times) {
      this.queryParams.payStart = times[0] + ' 00:00:00';
      this.queryParams.payEnd = times[1] + ' 23:59:59';
    },

    //多选操作事件
    handleSelectionChange(bills) {
      this.selectsBills = bills;
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.refreshBillList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.billTimeRange = []
      this.payTimeRange = []
      this.queryParams.billingStart = null;
      this.queryParams.billingEnd = null;
      this.queryParams.payStart = null;
      this.queryParams.payEnd = null;
      this.$refs.queryForm.resetFields();
      this.refreshBillList()
    },

    // 点击编辑
    handleEdit(item) {
      console.log('-------', item)
      this.$refs.editPayBill.show(item);
    },

    //批量收付款
    handleBulkPayments() {
      if (this.selectsBills.length > 0) {
        this.handleConfimPayment(2, this.selectsBills)
      } else {
        this.$message({message: '请至少选择一个账单', type: 'warning'})
      }
    },
    //点击确认收付款
    handleConfimPayment(opType, bill) {
      let bills = []
      if (opType == 1) {//确认收款
        bills.push(bill);
      } else if (opType == 2) {//批量收款
        bills = this.selectsBills
      }
      this.$refs.confimPayment.show(this.queryParams.type, opType, bills);
    },
    // 点击费用明细
    handleFeeBreakdown(item) {
      this.$refs.feeBreakdown.show(this.queryParams.type, item);
    },

    goOrder(item) {
      this.$router.push({
        path: '/orderBasic/detail',
        query: {orderNo: item.bizNo}
      })
    },
    goCar(item) {
      if (item.billType == 2) {//借出详情
        this.$refs.secondedDetail.show(item)
      }else  {//车辆详情
        this.$router.push({name: 'basic_detail', query: {id: item.carId}})
      }

    },

    //配置当前选择车主名称的样式
    rowStyle({row, rowIndex}) {
      if (this.currentOwnerId === row.id) {
        // 此处返回选中行的样式对象，按需设置
        return {
          color: '#1890ff',
        }
      }
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$modal
        .confirm('是否确认导出所有账单数据项？')
        .then(() => {
          this.exportLoading = true
          return exportSecondedFinancial(queryParams)
        })
        .then((response) => {
          this.$download.name(response.msg)
          this.exportLoading = false
        })
        .catch(() => {
        })
    },
  }
}
</script>
<style scoped="scoped">
/* .button1 {
    color: #efe8e8;
}
.button2 {
    color: #137ad9;
} */
.scheduled .el-form-item {
  margin-bottom: 0 !important;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.mf-title {
  /* font-size: 18px; */
  font-weight: bold;
}
</style>

